{{define "title"}}Admin - {{.Title}}{{end}}

{{define "style"}}
<style>
.action-div {
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 10px;
}
.action-div p {
  margin: 10px;
}
</style>
{{end}}

{{define "content"}}
<div class="row">
<div class="col-md-offset-2 col-md-8">

<h2>{{.Title}}</h2>
<hr>

<form class="form-horizontal" method="POST">
  {{.XsrfTokenField}}

  {{if .Overview}}
  <div class="form-group">
    <div class="col-sm-9">{{.Overview}}</div>
  </div>
  <hr>
  {{end}}

  {{range $field := .Fields}}
  <div class="form-group">
    <label for="{{$field.ID}}" class="col-sm-3 control-label">{{$field.Title}}</label>
    <div class="col-sm-9">
      {{if or (eq $field.Type "text") (eq $field.Type "password")}}
        <input
          type="{{$field.Type}}" class="form-control" aria-describedby="help-{{$field.ID}}"
          {{if $field.Placeholder}}
          placeholder="{{$field.Placeholder}}"
          {{end}}
          name="{{$field.ID}}" value="{{$field.Value}}"
          {{if $field.ReadOnly}}readonly{{end}}>
      {{else if eq .Type "choice"}}
        <select class="form-control" aria-describedby="help-{{$field.ID}}"
          name="{{$field.ID}}" value="{{$field.Value}}" {{if $field.ReadOnly}}disabled{{end}}>
          {{range $choice := $field.ChoiceVariants}}
            <option
              {{if eq $field.Value $choice}}selected{{end}}
              {{if $field.ReadOnly}}disabled{{end}}>
              {{$choice}}
            </option>
          {{end}}
        </select>
      {{else if eq $field.Type "static"}}
        <p class="form-control-static">{{$field.Value}}</p>
      {{end}}
      {{if $field.Help}}
        <span id="help-{{$field.ID}}" class="help-block">{{$field.Help}}</span>
      {{end}}
    </div>
  </div>
  {{end}}

  {{if and .Actions .Fields}}
  <hr>
  {{end}}

  {{range $action := .Actions}}
  <div class="form-group">
    <div class="col-sm-12 action-div">
      {{if $action.Help}}
      <p>{{$action.Help}}</p>
      {{end}}
      <button
        type="button"
        {{if $action.Confirmation}}
        class="btn btn-danger btn-block action-button"
        {{else}}
        class="btn btn-default btn-block action-button"
        {{end}}
        data-action-no-side-effects="{{$action.NoSideEffects}}"
        data-action-id="{{$action.ID}}"
        data-confirmation="{{$action.Confirmation}}">{{$action.Title}}</button>
    </div>
  </div>
  {{end}}

  <hr>
  <div class="form-group">
    {{if and .Fields .ShowSaveButton}}
    <div class="col-sm-2">
      <button type="submit" class="btn btn-primary">Save settings</button>
    </div>
    {{end}}
    <div class="col-sm-2">
      <a href="/admin/portal" class="btn btn-default">Back</a>
    </div>
  </div>
</form>

</div>
</div>

{{if .Actions}}
<form id="form-action" method="POST" style="display:none">
  {{.XsrfTokenField}}
</form>

<script>
window.onload = function () {
  'use strict';

  let actionLaunched = false;

  function launchAction(actionID, noSideEffects) {
    if (actionLaunched) {
      return
    }
    actionLaunched = true;

    const actionRef = './{{.ID}}/' + actionID;
    if (noSideEffects) {
      // Just go to the action page directly, no need to involve forms.
      window.location.href = actionRef;
    } else {
      // Navigate through a POST form with the XSRF token.
      const form = document.getElementById('form-action');
      form.setAttribute('action', actionRef);
      form.submit();
    }
  }

  for (const btn of document.getElementsByClassName('action-button')) {
    btn.onclick = function() {
      const actionID = this.getAttribute('data-action-id');
      const confirmation = this.getAttribute('data-confirmation');
      const noSideEffects = this.getAttribute('data-action-no-side-effects') == 'true';
      if (confirmation) {
        const dialog = Modal.confirm('Are you sure?', {content: confirmation});
        dialog.show().once('dismiss', (modal, ev, button) => {
          if (button && button.value) {
            launchAction(actionID, noSideEffects);
          }
        });
      } else {
        launchAction(actionID, noSideEffects);
      }
    }
  }
};
</script>
{{end}}

{{end}}
